<template>
  <j-modal title="当前活动参与人员" :width="700" :visible="visible" switchFullscreen @cancel="handleCancel" :footer="null">
    <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading" :columns="columns"
      :dataSource="pageData" @change="onTableChange">
      <!--操作-->
      <template slot="action" slot-scope="text, record">
        <a-button @click="onDetail(record)" type="link" style="padding:0;">活动详情</a-button>
      </template>
    </z-table>
    <div style="padding-top: 10px;display: flex;justify-content: flex-end;">
      <a-button @click="visible = false">关闭</a-button>
    </div>
  </j-modal>
</template>

<script>
  import { participantList } from '@/api/sjsk/activity/group'
  export default {
    data() {
      return {
        visible: false,
        loading: false,
        form: {},
        queryParam: {},
        columns: [
          
          {
            title: '组员名称',
            dataIndex: 'memberName',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          {
            title: '性别',
            dataIndex: 'memberGenre',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value={text === 1 ? '男' : '女'} length={14} />
            }
          },
          {
            title: '年龄',
            dataIndex: 'age',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          {
            title: '住址',
            dataIndex: 'memberAddr',
            width: 80,
            align: 'left',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          {
            title: '电话',
            dataIndex: 'memberPhoneNumber',
            width: 80,
            align: 'left',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          {
            title: '身份',
            dataIndex: 'memberIdentity',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value={text === 1 ? '组员' : '志愿者'} length={14} />
            }
          },
        ],
        pageFilter: {
          pageNo: 1,
          pageSize: 10
        },
        pageData: {}
      }
    },
    methods: {
      handleCancel() {
        this.visible = false
      },
      show(activityId) {
        this.queryParam.activityId = activityId
        this.onQuery()
        this.visible = true
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = { currentPage: 'pageNo' }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        let form = Object.assign({}, this.queryParam, this.pageFilter)
        this.loading = true
        participantList(form).then((res) => {
            if (res.success) {
              this.pageData = res.result ? res.result : {}
              this.loading = false
              this.$refs.table.onClearRowKeys()
            } else {
              this.loading = false
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
    }
  }
</script>

<style>
</style>
